<template>
	<div class="containers">
    <el-card>
		<div class="">
			<div class="handle-box">
				<el-button type="primary" icon="el-icon-plus" class="handle-add mr10" size="mini"
					@click="addregion">添加</el-button>
				<el-select v-model="code" @change="getData()" placeholder="请选择类型" size="mini">
					<el-option v-for="(item, index) in options" :key="item.id" :label="item.key" :value="item.id">
					</el-option>
				</el-select>
			</div>

			<el-table :data="tableData" class="table" ref="multipleTable" header-cell-class-name="table-header" size="mini" border :height="$tableHight"
				@selection-change="handleSelectionChange" v-loading="loading">

        <el-table-column type="index" width="55" label="序号" align="center"></el-table-column>
				<el-table-column label="展示图片" align="center">
					<template slot-scope="scope">
						<el-image class="table-td-thumb" :src="scope.row.img" fit="cover"
							:preview-src-list="[scope.row.img]"></el-image>
					</template>
				</el-table-column>
				<el-table-column label="类型" align="center">
					<template slot-scope="scope">
						<div v-for="item in options" v-if="item.id == scope.row.code">
							{{ item.key }}
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="url" label="跳转路径"></el-table-column>
				<el-table-column prop="sort" label="排序">
					<template slot-scope="scope">
						<el-input v-model="scope.row.sort" @blur="operations(scope.row, 1)" size="mini"></el-input>
					</template>
				</el-table-column>
				<el-table-column label="是否显示" align="center">
					<template slot-scope="scope">
						<el-tag size="mini" :type="scope.row.is_display ? 'success' : 'danger'">{{
							scope.row.is_display ? '是' : '否' }}</el-tag>
					</template>
				</el-table-column>

        <el-table-column prop="CreatedAt" label="创建时间">
          <template slot-scope="scope">
            {{ $clearTimer(scope.row.CreatedAt) }}
          </template>
        </el-table-column>

				<el-table-column label="操作" width="180" align="center">
					<template slot-scope="scope">
						<el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.row)" size="mini">编辑</el-button>
						<el-button type="text" icon="el-icon-delete" class="red"
							@click="handleDelete(scope.$index, scope.row)" size="mini">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex"
					:page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
			</div>
		</div>

		<!-- 编辑/添加弹出框 -->
		<el-dialog :title="type ? '编辑' : '添加'" :visible.sync="editVisible" width="30%">
			<el-form ref="form" :model="form" label-width="70px">
				<el-form-item label="类型">
					<el-select v-model="form.code" placeholder="请选择类型">
						<el-option v-for="(item, index) in options" :key="item.id" :label="item.key" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="跳转路径"><el-input v-model="form.url"></el-input></el-form-item>
				<el-form-item label="排序"><el-input v-model="form.sort" type="Number"></el-input></el-form-item>
				<el-form-item label="是否展示">
					<el-switch :active-value="1" :inactive-value="0" v-model="form.is_display"></el-switch>
				</el-form-item>
				<el-form-item label="展示图片">
					<div style="color:red;">比例:710/450</div>
					<el-upload class="avatar-uploader" :action="upload + '/'" :show-file-list="false" :data="upimg"
						:on-success="handleAvatarSuccess" :before-upload="beforeupload">
						<img v-if="imageUrl" :src="imageUrl" class="avatar" />
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="cancel">取 消</el-button>
				<el-button type="primary" @click="saveEdit">确 定</el-button>
			</span>
		</el-dialog>
  </el-card>
	</div>
</template>

<script>
export default {
	name: 'basetable',
	data() {
		return {
			options: [{ key: '首页轮播', id: 0 },{ key: '本地生活', id: 1},{ key: '首页广告', id: 3}], // 下拉选项
			form: {
				url: '',
				img: '',
				sort: 0,
				is_display: 1,
				code: 0
			},
			query: {
				pageIndex: 1,
				pageSize: 20
			},
			upimg: {
				token: '',
				key: new Date().valueOf()
			},
			code: 0,
			upload: '',
			url: '',
			tableData: [],
			multipleSelection: [],
			editVisible: false,
			pageTotal: 0,
			imageUrl: '',
			type: 0,
			loading: false
		};
	},
	created() {
		this.getToken().then(res => {
			this.upimg.token = res.data.token
			this.url = res.data.url
			this.upload = res.data.upload
		},
			function () {
				console.log('请求失败处理');
			}
		)
		this.getData()
	},
	methods: {
		// 上传图片
		handleAvatarSuccess(res, file) {
			this.form.img = this.url + res.key;
			this.imageUrl = URL.createObjectURL(file.raw);
		},
		beforeupload(file) {
			if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
				this.$message.error('上传头像图片只能是 JPG、PNG 格式!');
				return false;
			}
			// if (file.size / 1024 / 1024 > 1) {
			// 	this.$message.error('上传图标大小不能超过 1M!');
			// 	return false;
			// }
			let types = file.name.split('.')//获取图片格式
			this.upimg.key = this.$template + '/home/' + new Date().valueOf() + '.' + types[types.length - 1];
		},
		//获取数据
		getData() {
			this.loading = true
			this.request('admin/carouselSet/', 'get', { page: this.query.pageIndex, size: this.query.pageSize, code: this.code }).then(res => {
				console.log(res)
				this.tableData = res.data.data
				this.pageTotal = res.data.total
				this.loading = false
			})
		},
		// 编辑
		handleEdit(e) {
			this.editVisible = true;
			this.form = e;
			this.imageUrl = e.img;
			this.type = 1
		},
		cancel() {
			this.editVisible = false;
			this.form = {
				url: '',
				img: '',
				sort: 0,
				is_display: 1,
				code: 0
			};
			this.getData();
		},
		// 修改排序
		operations(e, code) {
			console.log(e)
			e.sort = Number(e.sort)
			this.request('admin/carouselSet/', 'put', e).then(res => {
				if (res.errno == 0) {
					this.$message.success(res.errmsg);
					this.getData()
				} else {
					this.$message.error(res.errmsg);
				}
			});
			this.editVisible = false;
			this.getData();
		},
		// 删除操作
		handleDelete(index, row) {
			// 二次确认删除
			this.$confirm('确定要删除吗？', '提示', {
				type: 'warning'
			})
				.then(() => {
					this.request('admin/carouselSet/', 'delete', { id: row.ID }).then(res => {
						if (res.errno == 0) {
							this.$message.success(res.errmsg);
							this.tableData.splice(index, 1)
							this.getData()
						} else {
							this.$message.error(res.errmsg);
						}
					});
				})
		},
		// 多选操作
		handleSelectionChange(val) {
			this.multipleSelection = val;
		},
		// 添加
		addregion() {
			this.form = {
				url: '',
				img: '',
				sort: 0,
				is_display: 1,
				code: 0
			};
			this.type = 0
			this.imageUrl = '';
			this.editVisible = true;
		},

		// 添加/修改
		saveEdit() {
			// if (!this.form.url) return this.$message.error('请输入跳转地址');
			if (!this.form.img) return this.$message.error('请上传图片');
			this.form.sort = Number(this.form.sort)
			this.request('admin/carouselSet/', this.type ? 'put' : 'post', this.form).then(res => {
				if (res.errno == 0) {
					this.$message.success(res.errmsg);
					this.form = {
						url: '',
						img: '',
						sort: 0,
						is_display: 1,
						code: 0
					};
				} else {
					this.$message.error(res.errmsg);
				}
			});
			this.editVisible = false;
			this.getData();
		},
		// 分页导航
		handlePageChange(val) {
			this.$set(this.query, 'pageIndex', val);
			this.getData();
		}
	}
};
</script>

<style scoped>
/* 使用 /deep/ 或 >>> 来穿透 scoped 样式 */
::v-deep .el-table th.el-table__cell {
  background-color: #f2f2f2;
  /* 设置表头颜色 */
  color: #333;
  /* 设置表头文字颜色 */
}

.container {
	padding: 20px;
}

.el-upload--text {
	width: 200px !important;
}

.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;

	position: relative;
	overflow: hidden;
}

.avatar-uploader .el-upload:hover {
	border-color: #409eff;
}

.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	/* width: 100px; */
	height: 100px;
	line-height: 100px;
	text-align: center;
}

.avatar {
	width: 100%;
	height: 178px;
	display: block;
}

.handle-box {
	margin-bottom: 20px;
}

.handle-select {
	width: 120px;
}

.handle-input {
	width: 300px;
	display: inline-block;
}

.table {
	width: 100%;
	font-size: 14px;
}

.red {
	color: #ff0000;
}

.mr10 {
	margin-right: 10px;
}

.table-td-thumb {
	display: block;
	margin: auto;
	width: 30px;
	height: 30px;
  border-radius: 2px;
	.el-image img {
		object-fit: cover;
	}
}

/* 设置分页按钮样式 */
.pagination {
	margin-top: 20px;
	display: flex;
	justify-content: flex-end;
}
</style>
